<template>
  <div class="div-table" @scroll="scroll">
    <div class="tb">
      <div class="tb-colgroup" :style="headStyle">
        <div class="cell" v-for="(cell,i) in columns" :key="i">{{cell}}</div>
      </div>
      <div class="tb-head" :style="headStyle">
        <div class="cell" v-for="(cell,i) in columns" :key="i">{{cell}}</div>
      </div>
      <div class="tb-body">
        <div class="row" v-for="(row,i) in rows" :key="i">
          <div class="cell" v-for="(cell,c) in columns" :key="c" :title="row[c]">{{row[c]}}</div>
        </div>
      </div>
    </div>
    <div class="table-scroll"></div>
  </div>
</template>
<script>
export default {
  props: ["value", "placeholder", "maxlength", "tips"],
  data() {
    return {
      scrollTop: 0,
      columns: [],
      rows: []
    };
  },
  watch: {
    value(fresh, old) {
      if (!this.isfocus || !this.innerText) {
        this.text = fresh;
      }
    }
  },
  computed: {
    headStyle() {
      let top = this.scrollTop || 0;
      return {
        transform: `translateY(${top}px)`
      };
    }
  },
  created() {
    window.tb = this;
    this.virtualData();
  },
  methods: {
    scroll(ev) {
      this.scrollTop = ev.target.scrollTop;
      // console.log(ev);
    },
    virtualData() {
      let columnsNum = Math.floor(2 + Math.random() * 15);
      let columns = new Array(columnsNum).fill().map((item, i) => `CEll ${i}`);

      let rowsNum = Math.floor(1 + Math.random() * 20);
      let rows = new Array(rowsNum).fill().map((row, i) => {
        let num = Math.floor(columns.length);

        return new Array(num).fill().map((item, j) => {
          let str = new Array(Math.floor(2 + Math.random() * 15)).fill("a");
          return `r${i}c${j} ${str}`;
        });
      });
      this.columns = columns;
      this.rows = rows;
      return { columns, rows };
    }
  }
};
</script>
<style>
::-webkit-scrollbar {
}
.div-table {
}
.tb {
  display: table;
  width: 100%;
}
.tb-colgroup {
  display: table-column-group;
}
.tb-head {
  font-weight: bold;
  display: table-header-group;
  background: #fff;
}
.tb-body {
  display: table-row-group;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  box-shadow: 0 0 1px #ddd;
  padding: 10px;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>